<!--
 * @Author: Hzh
 * @Date: 2021-04-23 09:57:53
 * @LastEditTime: 2021-04-23 12:27:21
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="about">
        <!-- 头部 -->
        <div class="top"></div>
        <!-- 下面的三屏 -->
        <div class="bottom">
            <!-- 左屏 -->
            <div class="child_common TG_left">
                <!-- 上半部分  设备台账 -->
                <div class="TG_SBTZ">
                    <iframe :src="SBTZ" frameborder="0"></iframe>
                </div>
                <!-- 下半部分 监测数据  仿真管理 模型管理 -->
                <div class="TG_JCSJ_FZGL_MXGL">
                    <!-- 监测数据 -->
                    <div class="TG_JCSJ">
                        <iframe :src="JCSJ" frameborder="0"></iframe>
                    </div>
                    <!-- 仿真管理  模型管理 -->
                    <div class="TG_FZGL_MXGL">
                        <!-- 仿真管理 -->
                        <div class="TG_FZGL">
                            <iframe :src="FZGL" frameborder="0"></iframe>
                        </div>
                        <!-- 模型管理 -->
                        <div class="TG_MXGL">
                            <iframe :src="MXGL" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中屏 -->
            <div class="child_common TG_middle">
                <!-- <img src="../assets/GIS_middleBG.png" alt=""> -->
                <!-- <img class="middle_btn" src="../assets/middle_btn.png" alt=""> -->
                <iframe id="middleURl" :src="middle_URl" frameborder="0"></iframe>
            </div>
            <!-- 右屏 -->
            <div class="child_common TG_right">
                <!-- 左边 -->
                <div class="TG_right_left">
                    <!-- 状态分析 -->
                    <div class="TG_ZTFX">
                        <iframe :src="ZTFX" frameborder="0"></iframe>
                    </div>
                    <!-- 智能诊断 -->
                    <div class="TG_ZNZD">
                        <iframe :src="ZNZD" frameborder="0"></iframe>
                    </div>
                    <!-- 状态预测 -->
                    <div class="TG_ZTYC">
                        <iframe :src="ZTYC" frameborder="0"></iframe>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="TG_right_right">
                    <!-- 故障分析 -->
                    <div class="TG_GZFX">
                        <iframe :src="GZFX" frameborder="0"></iframe>
                    </div>
                    <!-- 状态反演+知识培训 -->
                    <div class="ztfyAndZSPX">
                        <!-- 状态反演 -->
                        <div class="TG_ZTFY">
                            <iframe :src="ZTFY" frameborder="0"></iframe>
                        </div>
                        <!-- 知识培训 -->
                        <div class="TG_ZSPY">
                            <iframe :src="ZSPX" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import Card from '../static/card.js'

export default {
    data() {
        return {
            // 左屏的iframeURL
            left_URl: '',
            // 中屏的iframeURL
            middle_URl: '',
            // 右屏的iframeURL
            right_URl: '',
            // 设备台账
            SBTZ: '',
            // 监测数据
            JCSJ: '',
            // 仿真管理
            FZGL: '',
            // 模型管理
            MXGL: '',
            // 状态分析
            ZTFX: '',
            // 智能诊断
            ZNZD: '',
            // 状态预测
            ZTYC: '',
            // 故障分析
            GZFX: '',
            // 知识培训
            ZSPX: '',
            // 状态反演
            ZTFY: ''
        }
    },
    mounted() {
        this.jieShou_postMEssage()
        this.middle_URl = Card.middle_URl

        this.ZTFX = Card.ZTFX;
        this.ZNZD = Card.ZNZD;
        this.ZTYC = Card.ZTYC;
        this.GZFX = Card.GZFX;
        this.ZTFY = Card.ZTFY;
        this.ZSPX = Card.ZSPX;
        this.SBTZ = Card.SBTZ;
        this.JCSJ = Card.JCSJ;
        this.MXGL = Card.MXGL;
        this.FZGL = Card.FZGL;
    },
    methods: {
        // main接收
        jieShou_postMEssage() {
            console.log('main')

            window.addEventListener('message', (event) => {
                // console.log(event)
                let e = event
                // console.log(event.data)
                let clientId = event.data.event.data.clientId
                let data = event.data.event.data
                console.log('main:', data)
                // 判断是否是8022发来的，如果是，就转发给指定id的标签
                if (clientId == 'ybgc_gateway') {
                    console.log('转发成功')
                    let middleURl = document.getElementById('middleURl').contentWindow
                    console.log('aaaaa:', middleURl)
                    console.log('eeeeeeeeeee:', e.data)
                    middleURl.postMessage(e.data, '*')
                }

            }, false)
        }
    }
}
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.about {
    width: 5760px;
    height: 1080px;
    background-color: #000;

    // 头部
    .top {
        width: 100%;
        height: 160px;
        // background-color: purple;
        background: url('../assets/top_btn.png') no-repeat;
    }

    // 下面的三屏
    .bottom {

        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 896px;
        padding-left: 28px;
        // background-color: yellowgreen;
    }

    // 三屏的公共样式
    .child_common {
        width: 1856px;
        height: 100%;
        // background-color: yellow;
    }

    // 左屏
    .TG_left {
        display: flex;
        flex-direction: column;

        // 上半部分  设备台账
        .TG_SBTZ {
            flex: 1;
            // background-color: pink;
        }

        // 下半部分 监测数据  仿真管理 模型管理
        .TG_JCSJ_FZGL_MXGL {
            display: flex;
            flex: 2;
            margin-top: 16px;

            // background-color: red;
            // 监测数据
            .TG_JCSJ {
                flex: 1;
                margin-right: 16px;
                // background-color: red;
            }

            // 仿真管理  模型管理
            .TG_FZGL_MXGL {
                display: flex;
                flex: 2;

                // background-color: green;
                // 仿真管理
                .TG_FZGL {
                    flex: 1;


                    // background-color: green;
                }

                // 模型管理
                .TG_MXGL {
                    flex: 1;
                    // background-color: orange;
                }
            }
        }
    }

    //   中屏
    .TG_middle {
        background: url('../assets/GIS_middleBG.png') no-repeat;
        text-align: right;

    }

    // 右屏

    .TG_right {
        display: flex;
        margin-right: 28px;
        // padding-right: 28px;

        // 右屏左边
        .TG_right_left {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-right: 16px;
            // background-color: #fff;

            // 状态分析
            .TG_ZTFX {
                flex: 1;
                // background-color: purple;
            }

            // 智能诊断
            .TG_ZNZD {
                flex: 1;
                margin-top: 16px;
                margin-bottom: 16px;
                // background-color: orange;
            }

            // 状态预测
            .TG_ZTYC {
                flex: 1;
                // background-color: blue;
            }
        }

        // 右屏右边
        .TG_right_right {
            display: flex;
            flex-direction: column;
            flex: 2;

            // 上半部分故障分析
            .TG_GZFX {
                flex: 1;
                margin-bottom: 10px;
                // background-color: yellow;
            }

            // 下半部分状态反演+知识培训
            .ztfyAndZSPX {
                display: flex;
                flex: 2;

                // 状态反演
                .TG_ZTFY {
                    flex: 1;
                    margin-right: 16px;
                    // background-color: red;
                }

                // 知识培训
                .TG_ZSPY {
                    flex: 1;
                    // background-color: green;
                }
            }
        }
    }

    iframe {
        width: 100%;
        height: 100%;

    }

}
</style>
